<template>
  <div class="menu-b">
    <Menu text-color="#666" active-text-color="#fff" default-active="1">
      <menu-item v-for="(item, index) in menu" :key="index" :index="item.index" @click="handleItemClick(item)">
        <div class="menu-item-wrap">
					<img :src="item.activeSrc" alt="" class="acIcon">
					<img :src="item.defaultSrc" alt="" class="deIcon">
          <span slot="title">{{ item.title }}</span>
        </div>
      </menu-item>
    </Menu>
  </div>
</template>

<script>
import { Menu, MenuItem } from 'element-ui'

export default {
  name: 'MenuB',
  components: { Menu, MenuItem },
  props: {
    menu: Array
  },
  data() {
    return {}
  },
  methods: {
    handleItemClick(item) {
      this.$emit('item-click', item)
    }
  },
  mounted() {
    
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.menu-b {
  /deep/ .el-menu-item.is-active {
    background-color: $theme-color-1;
  }

  .menu-item-wrap {
    display: flex;
    align-items: center;

    img {
      object-fit: contain;
      border-radius: 50%;
      margin-right: 20px;
    }
		.acIcon{
			display: none;
		}
		
  }
	.is-active .acIcon{
		display: inline-block;
	}
	.is-active .deIcon{
		display: none;
	}
}
</style>
